<template>
  <div>
    <!-- 面包屑导航区域 -->
    <el-breadcrumb separator-class="el-icon-arrow-right">
      <el-breadcrumb-item :to="{ path: '/home' }">首页</el-breadcrumb-item>
      <el-breadcrumb-item>单据管理</el-breadcrumb-item>
      <el-breadcrumb-item>已驳回单据</el-breadcrumb-item>
    </el-breadcrumb>
    <!-- 卡片视图区域 -->
    <el-card class="box-card">
      <div slot="header" class="clearfix">
        <span>已驳回单据列表</span>
      </div>
      <div>
        <el-radio-group v-model="selectStatus">
          <el-radio-button label="审核中单据" @click.native="toChecking" ></el-radio-button>
          <el-radio-button label="已通过单据" @click.native="toPassed"></el-radio-button>
          <el-radio-button label="已驳回单据" @click.native="toRefused"></el-radio-button>
        </el-radio-group>
      </div>
      <!-- 搜索区域 -->
      <el-input placeholder="请输入内容" v-model="queryInfo.searchContent" clearable
                @clear="getRefusedTicketsList" style="margin-top: 20px">
        <el-select v-model="queryInfo.select" slot="prepend" placeholder="请选择">
          <el-option label="职工姓名" value="employee-name"></el-option>
          <el-option label="工作部门" value="department"></el-option>
        </el-select>
        <el-button slot="append" icon="el-icon-search" @click="getRefusedTicketsList"></el-button>
      </el-input>
      <!-- 票据列表区域-->
      <el-table :data="refusedList" border stripe
                :header-cell-style="{'text-align':'center'}"
                :cell-style="{'text-align':'center'}">
        <!-- 展开列 -->
        <el-table-column type="expand">
          <template slot-scope="scope">
            <div class="block">
              <el-timeline>
                <el-timeline-item v-if="scope.row.auditor1!==''" :timestamp="scope.row.date1" placement="top" color="#0bbd87">
                  <el-card>
                    <h4>{{scope.row.opinion1}}</h4>
                    <p>{{scope.row.auditor1}} 审核于 {{scope.row.date1}}</p>
                  </el-card>
                </el-timeline-item>
                <el-timeline-item v-if="scope.row.auditor2!==''" :timestamp="scope.row.date2" placement="top" color="#519EEE">
                  <el-card>
                    <h4>{{scope.row.opinion2}}</h4>
                    <p>{{scope.row.auditor2}} 审核于 {{scope.row.date2}}</p>
                  </el-card>
                </el-timeline-item>
                <el-timeline-item v-if="scope.row.auditor3!==''" :timestamp="scope.row.date3" placement="top" color="#EE220B">
                  <el-card>
                    <h4>{{scope.row.opinion3}}</h4>
                    <p>{{scope.row.auditor3}} 审核于 {{scope.row.date3}}</p>
                  </el-card>
                </el-timeline-item>
              </el-timeline>
            </div>
          </template>
        </el-table-column>
        <!-- 信息列 -->
        <el-table-column type="index" label="序号"></el-table-column>
        <el-table-column prop="employeeName" label="职工姓名"></el-table-column>
        <el-table-column prop="department" label="职工部门" ></el-table-column>
        <el-table-column prop="sex" label="性别"></el-table-column>
        <el-table-column prop="age" label="年龄"></el-table-column>
        <el-table-column prop="fee" label="医疗费用"></el-table-column>
        <el-table-column prop="report" label="上报金额"></el-table-column>
        <el-table-column prop="date" label="上报日期"></el-table-column>
        <el-table-column prop="state" label="状态"></el-table-column>
        <el-table-column label="操作" width="150px">
          <template slot-scope="scope">
            <!--查看单据详情-->
            <el-tooltip class="item" effect="dark" content="查看报销单" placement="top" :enterable="false">
              <el-button type="info" icon="el-icon-zoom-in" size="mini" @click="showCheckDialog(scope.row.receipt_id)"></el-button>
            </el-tooltip>
          </template>
        </el-table-column>
      </el-table>
      <!-- 分页区域 -->
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :total="total"
        :current-page="queryInfo.nowPage"
        :page-sizes="[1, 2, 5, 10]"
        :page-size="queryInfo.pageSize"
        layout="total, sizes, prev, pager, next, jumper"
      >
      </el-pagination>
    </el-card>
    <!-- 查看票据的对话框 -->
    <el-dialog title="票据详情" :visible.sync="checkDialogVisible" width="40%">
      <!-- 内容主体区域 -->
      <el-form :model="ticketInfoForm" label-width="100px" >
        <el-form-item label="职工姓名" prop="employeeName">
          <el-input class="form-input" v-model="ticketInfoForm.employeeName" disabled></el-input>
        </el-form-item>
        <el-form-item label="职工工号" prop="workNumber">
          <el-input class="form-input" v-model="ticketInfoForm.workNumber" disabled></el-input>
        </el-form-item>
        <el-form-item label="职工部门" prop="department">
          <el-input class="form-input" v-model="ticketInfoForm.department" disabled></el-input>
        </el-form-item>
        <el-form-item label="性别" prop="sex">
          <el-input class="form-input" v-model="ticketInfoForm.sex" disabled></el-input>
        </el-form-item>
        <el-form-item label="年龄" prop="age">
          <el-input class="form-input" type="age" v-model.number="ticketInfoForm.age" autocomplete="off" disabled></el-input>
        </el-form-item>
        <el-form-item label="就诊医院" prop="hospital">
          <el-input class="form-input" v-model="ticketInfoForm.hospital" disabled></el-input>
        </el-form-item>
        <el-form-item label="医疗费用" prop="fee">
          <el-input class="form-input" type="number" v-model.number="ticketInfoForm.fee" autocomplete="off" disabled></el-input>
        </el-form-item>
        <el-form-item label="上报金额" prop="report">
          <el-input class="form-input" type="number" v-model.number="ticketInfoForm.report" autocomplete="off" disabled></el-input>
        </el-form-item>
        <el-form-item label="开票日期" prop="ticketDate">
          <el-input class="form-input" type="date" v-model="ticketInfoForm.ticketDate" autocomplete="off" disabled></el-input>
        </el-form-item>
        <el-form-item label="上报日期" prop="date">
          <el-input class="form-input" type="date" v-model="ticketInfoForm.date" autocomplete="off" disabled></el-input>
        </el-form-item>
        <el-form-item label="票据原始影像" prop="picture">
          <el-image
            style="width: 300px; height: 200px ;display: block"
            :src="ticketInfoForm.picture"
            :preview-src-list="srcList">
          </el-image>
        </el-form-item>
      </el-form>
    </el-dialog>
  </div>
</template>
<script>

  export default {
    data() {
      return {
        selectStatus: '已驳回单据',
        //角色ID
        roleId: null,
        //审核中票据列表
        refusedList: [],
        // 总数
        total: 0,
        queryInfo: {
          //当前页数
          nowPage: 1,
          //当前每页显示多少条数据
          pageSize: 10,
          // 选择种类
          select: '',
          //搜索内容
          searchContent: '',
        },
        //操作的表格对象id
        idInfo: {
          receipt_id: 1
        },
        // 控制查看票据对话框的显示与隐藏
        checkDialogVisible: false,
        //票据详情
        ticketInfoForm: {},
        //图片预览功能
        srcList: []
      }
    },
    created () {
      this.roleId=this.$root.roleId
      this.getRefusedTicketsList()
    },
    methods: {

      /**
       * 跳转到审核中单据页面
       */
      toChecking(){
        this.$router.push({ path: '/allTicket' }).catch(err => {
          //console.log('输出报错',err)
        })
      },

      /**
       * 跳转到已通过单据页面
       */
      toPassed(){
        this.$router.push({ path: '/passedList' }).catch(err => {
          //console.log('输出报错',err)
        })
      },

      /**
       * 跳转到已驳回单据页面
       */
      toRefused(){
        this.$router.push({ path: '/refusedList' }).catch(err => {
          //console.log('输出报错',err)
        })
      },

      /**
       * 获取审核中单据
       */
      getRefusedTicketsList () {
        this.$http.get('refused-tickets', { params: this.queryInfo }).then(res=> {
          //console.log(res)
          if (res.status !== 200) {
            if(res.status === 403) {
              return this.$message.error('您没有获取已驳回票据列表的权限!')
            }
            return this.$message.error('获取单据列表失败!')
          }
          console.log(res.data)
          this.total = res.data.total
          this.refusedList = res.data.tickets
        })
      },

      /**
       * 监听分页尺寸改变
       * @param newSize:新的分页尺寸
       */
      handleSizeChange(newSize) {
        this.queryInfo.pageSize=newSize
        this.getRefusedTicketsList()
      },

      /**
       * 监听当前页码变化
       * @param nowPage:当前页码
       */
      handleCurrentChange(nowPage){
        this.queryInfo.nowPage=nowPage
        this.getRefusedTicketsList()
      },

      /**
       * 展示查看票据的对话框
       * @param id 票据ID
       */
      async showCheckDialog(id){
        this.idInfo.receipt_id=id
        let res=await this.$http.get('ticket', { params: this.idInfo })
        //console.log(res)
        if (res.status !== 200) {
          return this.$message.error('获取票据详情失败!')
        }
        this.ticketInfoForm=res.data
        let temp=this.ticketInfoForm.picture
        this.ticketInfoForm.picture = this.setImageUrl(temp)
        this.srcList.push(this.ticketInfoForm.picture)
        this.checkDialogVisible = true
      },

      /**
       * 设置票据图片的url
       */
      setImageUrl:function(pictureUrl){
        // 0. 设置请求参数
        const method = 'GET'
        const Host = 'tickets.bj.bcebos.com';
        const accessKey = '79c9cba51f0a4df1a6281aab51cdad3e';
        const secretKey = 'b21aa6a38adf439fa2dd26c6033e1311';
        let url='/'+pictureUrl; // 要有 "/"
        const params = {};
        const headers = {
          'Host': Host
        };
        // 1. 生成认证字符串signature
        const Auth = require('@baiducloud/sdk').Auth;
        const auth = new Auth(accessKey, secretKey);
        let signature = auth.generateAuthorization(method, url, params, headers);

        // 2. API方式 访问资源
        let picture = 'http://' + Host + url + '?authorization=' + signature;
        // console.log(picture)
        return picture
      }
    }
  }
</script>
<style lang="less" scoped>
  .el-input {
    width: 500px;
  }
  .el-select {
    width: 110px;
  }
  .input-with-select .el-input-group__prepend {
    background-color: #fff;
  }
  .el-table {
    margin-top: 15px;
    font-size: 12px;
  }
  .el-pagination {
    margin-top: 15px;
  }
  .form-input {
    width: 80%;
  }
</style>
